<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%@ include file="/commons/meta.jsp"%>
<title>空间管理,初学者论坛,BeginCode,beginCode</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="${ctx}/css/bootstrap.css">
<link rel="stylesheet" href="${ctx}/jcrop/css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="${ctx}/fileupload/css/jquery.fileupload.css">
<link rel="stylesheet" href="${ctx}/fileupload/css/jquery.fileupload-ui.css">
<noscript><link rel="stylesheet" href="${ctx}/fileupload/css/jquery.fileupload-noscript.css"></noscript>
<noscript><link rel="stylesheet" href="${ctx}/fileupload/css/jquery.fileupload-ui-noscript.css"></noscript>
<script src="${ctx}/js/jquery.min.js"></script>
<script src="${ctx}/jcrop/js/jquery.Jcrop.js"></script>
<script src="${ctx }/fileupload/js/vendor/jquery.ui.widget.js"></script>
<script src="${ctx }/fileupload/js/jquery.iframe-transport.js"></script>
<script src="${ctx }/fileupload/js/jquery.fileupload.js"></script>
<style type="text/css">

.bs-callout {
	padding: 20px;
	margin: 20px 0;
	border: 1px solid #eee;
	border-left-width: 5px;
	background-color: #fff;
}

.bs-callout h4 {
	margin-top: 0;
	margin-bottom: 5px
}

.bs-callout p:last-child {
	margin-bottom: 0
}

.bs-callout code {
}

.bs-callout+.bs-callout {
	margin-top: -5px
}

.bs-callout-danger {
	border-left-color: #d9534f
}

.bs-callout-danger h4 {
	color: #d9534f
}

.bs-callout-warning {
	border-left-color: #f0ad4e
}

.bs-callout-warning h4 {
	color: #f0ad4e
}

.bs-callout-info {
	border-left-color: #5bc0de
}

.bs-callout-info h4 {
	color: #5bc0de
}
.bs-docs-header {
	position: relative;
	padding: 30px 15px;
	color: #fff;
	text-align: center;
	text-shadow: 0 1px 0 rgba(0,0,0,.1);
	background-color: #3071a9;
	background-repeat: repeat-x;
}

.bs-docs-header {
	margin-bottom: 40px;
	font-size: 20px
}

.bs-docs-header h1 {
	margin-top: 0;
	color: #fff;
}

.bs-docs-header p {
	margin-bottom: 0;
	font-weight: 300;
	line-height: 1.4;
}

.bs-docs-header .container {
	position: relative;
}
.container h1 {
	margin-top: 0;
	color: #fff;
	text-align: left;
	font-weight:bold;
}
.container p {
	text-align: left;
}
.bs-docs-footer {
	margin-top: 0;
	border-top: 0
}

.bs-docs-footer {
	padding-top: 40px;
	padding-bottom: 20px;
	color: #777;
	text-align: center;
	border-top: 1px solid #e5e5e5
}

.bs-docs-footer-links {
	padding-left: 0;
	margin-top: 20px;
	color: #999
}

.bs-docs-footer-links li {
	display: inline;
	padding: 0 2px
}

.bs-docs-footer-links li:first-child {
	padding-left: 0
}

@media (min-width:768px) {
	.bs-docs-footer p {
		margin-bottom: 0;
		text-align: center;
	}
}


</style>
</head>
<body style="background-color: #f8f8f8;">
<jsp:include  page="top.jsp"/>
<ol class="breadcrumb">
    <li>
        <a href="#">首页</a>
    </li>
    <li class="active">空间管理</li>
</ol>
<div class="container .col-xs-" style="margin-top:10px; border-radius: 0px;">
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-primary" style="margin-bottom:10px">
                <div class="panel-body">
                    <div class="media" style="margin-bottom:5px">
                        <a class="media-left" href="">
                            <img src="" id="pic" style="width:80px;height:80px;" alt="">
                        </a>
                        <div class="media-body">
                            <h2 class="media-heading " id="nickName" style="color:#EA0000"></h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <button type="button" class="btn btn-primary" id="addBlog" data-toggle="button" aria-pressed="false" autocomplete="off" style="border-radius: 0px;width:100%;height:60px;margin-bottom:10px;font-weight:bold;font-size:35px">
			  发布博文
			</button>
                </div>
            </div>
            <div class="list-group" id="classList">
                <a href="#" class="list-group-item active"> 空间管理 </a>
                <a href="#userInfo" aria-controls="userInfo" role="tab" data-toggle="tab" class="list-group-item "> 修改资料 </a>
                <a href="#home" id="classFylab" aria-controls="home" role="tab" data-toggle="tab" class="list-group-item "> 博客分类 </a>
                <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" class="list-group-item "> 密码修改 </a>
                <a href="#updateIcon" aria-controls="updateIcon" role="tab" data-toggle="tab" class="list-group-item "> 修改头像 </a>
                <!-- 							<a href="#settings" aria-controls="settings" role="tab" data-toggle="tab" class="list-group-item "> 修改邮箱 </a>  -->
            </div>
        </div>
        <div class="col-md-9">
            <div class="panel panel-primary" style="margin-top:0;">
                <div class="panel-body">
                    <ol class="breadcrumb" style="background-color:#5bc0de;">
                        <li>
                            <a href="#">空间</a>
                        </li>
                        <li>
                            <a href="#">管理</a>
                        </li>
                    </ol >
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane " id="home">
                            <table class="table table-striped table-bordered">
                                <tr class="info">
                                    <th>分类名称</th>
                                    <th>修改</th>
                                    <th>删除</th>
                                </tr>
                                <tbody id="classifyTab">
  								</tbody>
                            </table>
                            <form class="form-inline" role="form">
                                <div class="form-group">
                                    <p class="form-control-static">分类名称：</p>
                                </div>
                                <div class="form-group">
                                    <input type="hidden" name="classFyId" id="classFyId" value=""/>
                                    <input type="text" class="form-control" id="classfyName" placeholder="分类名称">
                                </div>
                                <button type="button" id="saveClassfy" class="btn btn-primary" style="margin-left:10px;">保存</button>
                            </form>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="profile">
                            <form role="form" id="blogForm" action="${ctx}/user/updPassword" method="post">
                                <div class="form-group">
                                    <label for="exampleInputEmail1"><span class="labelinfowarn" ></span>原密码</label>
                                    <input type="password" class="form-control required" id="oldPwd" name="oldPwd" value="" placeholder="请输入原密码">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputPassword1"><span class="labelinfosuccess" ></span>新密码</label>
                                    <input type="password" class="form-control required" id="pwd" name="pwd" value="" placeholder="请输入新密码">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputPassword1"><span class="labelinfoblue" ></span>确认密码</label>
                                    <input type="password" class="form-control required" id="repwd" name="repwd" value="" placeholder="请再次输入新密码">
                                </div>
                                <div style="margin-top:10px;text-align:center;">
                                    <button type="button" class="btn btn-primary" id="send" style="width:100px;">提交</button>
                                </div>
                            </form>
                        </div>
                        <div role="tabpanel" class="tab-pane active" id="userInfo">
                            <form>	  	
                            
               <input type="hidden" name="bc_user_id" id="bc_user_id" value="${bcUser.bc_user_id }" />	
   <div class="form-group" >
    <label for="email"><span class="labelinfodanger" ></span>电子邮箱</label>
    <input  class="form-control required"    id="email" name="email" placeholder="电子邮箱" readonly="readonly"  value="${bcUser.email }"  >
  </div>
  
     <div class="form-group">
    <label for="nickname"><span class="labelinfowarn" ></span>昵称</label>
    <input   class="form-control required" id="nickname" name="nickname"  value="${bcUser.nickname }" placeholder="昵称">
  </div>
  <div class="form-group">
  <label for="sex"><span class="labelinfodanger" ></span>性别</label>
	   <select class="form-control" name="sex" id="sex"  value="${bcUser.sex }">
		  <option value="1" >男</option>
		  <option value="0" >女</option>
		</select>  
	</div>
  <div style="margin-top:10px;text-align:center;">
   <button type="button" class="btn btn-primary"  id="userSave"  style="width:100px;">修改资料</button> 
   </div>
<div style="margin-top:10px;text-align:center;color:red;font-weight:bold;" id="msgInfo">
   </div>
</p>
</form>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="updateIcon">
                            <div class="container">
                                    <div class="row fileupload-buttonbar">
                                        <div class="col-lg-7">
                                            <!-- The fileinput-button span is used to style the file input field as button -->
                                            <span class="btn btn-success fileinput-button file-uploadspan">
                                                <i class="glyphicon glyphicon-plus"></i>
                                                <span>添加文件...</span>
                                                <input type="file" id="fileupload" name="files[]" data-url="${ ctx}/user/uploadImage" >
                                            </span>
                                        </div>
                                    </div>
                            </div>
                            <div class="container cutarea">
                                <div class="row">
                                    <div class="span12">
                                        <div class="jc-demo-box">
                                            <img src="" id="target" alt="[Jcrop Example]"/>
                                            <!-- This is the form that our event handler fills -->
                                            <form id="coords" class="coords" method="post" action="${ctx }/user/cutImage">
                                                <div class="inline-labels">
                                                    <label>
                                                        <input type="hidden" size="4" id="x1" name="x1"/>
                                                    </label>
                                                    <label>
                                                        <input type="hidden" size="4" id="y1" name="y1"/>
                                                    </label>
                                                    <label>
                                                        <input type="hidden" size="4" id="w" name="w"/>
                                                    </label>
                                                    <label>
                                                        <input type="hidden" size="4" id="h" name="h"/>
                                                    </label>
                                                    <label>
                                                        <input type="hidden" id="iconName" name="iconName"/>
                                                    </label>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

 <jsp:include page="foot.jsp"></jsp:include>

	<script src="${ctx}/js/md5.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="${ctx}/js/bootstrap.min.js"></script>
 	<script type="text/javascript">
 	$(function(){
 		//隐藏裁剪区
 		$('.cutarea').hide();
		var checkBool = false;
		 //点击新增按钮。
       $('#addBlog').click(function(){
              window.location.href="${ctx}/blog/addBlogInit";
       });
		 //加载登录人
       jQuery.ajax({
   		type:"POST",
   	 	url:"${ctx}/user/getUser", 
   	 	data:"",
   		dataType:"json",
   		success:function(data){
   			 var nickName = data.nickName;
   				if( typeof(nickName) != "undefined" &&  nickName != ""){
   					$("#nickName").append(nickName);
   				} 
   			}
   	 	});
		 //加载头像
       jQuery.ajax({
   		type:"POST",
   	 	url:"${ctx}/user/selUserIcon", 
   	 	data:"userId=",
   		dataType:"json",
   		success:function(data){
   			 var pic = data.pic;
   				if( typeof(pic) != "undefined" &&  pic != ""){
   					$("#pic").attr("src","http://123.57.17.244:81/image/iconsavepath/"+pic);
   				} 
   			}
   	 	});
	        //如果是必填的，则加红星标识.
	        $("form :input.required").each(function(){
	            var $required = $("<strong class='hight'>*</strong>"); //创建元素
	            $(this).prev().append($required); //然后将它追加到文档中
	        });
	        
	         //文本框失去焦点后
	        $('form :input').blur(function(){
	             var $parent = $(this).prev();
	             $parent.find(".formtips").remove();
	             //验证密码
	             if( $(this).is('#pwd') ){
	                if( this.value=="" ||  this.value.length < 6 || this.value.length > 100 ){
	                      var errorMsg = '密码长度要求在6-100个之间.';
	                      $parent.append('<span class="formtips onError hight">'+errorMsg+'</span>');
	                      $(this).parent().addClass("has-error");
	                     checkBool = true;
	                }else{
	                	if($("#repwd").val() !="" && $("#pwd").val() != $("#repwd").val()){
               		  var errorMsg = '两次密码输入不一致.';
	                      $parent.append('<span class="formtips onError hight">'+errorMsg+'</span>');
	                      $(this).parent().addClass("has-error");
	                     checkBool = true;
               	 }else{
               		 $(this).parent().removeClass("has-error");
               		 checkBool = false;
               	 }
	                	
	                }
	             }
	             //验证重复密码
	             if( $(this).is('#repwd') ){
	                if( this.value=="" ||  this.value.length < 6 || this.value.length > 100 ){
	                      var errorMsg = '密码长度要求在6-100个之间.';
	                      $parent.append('<span class="formtips onError hight">'+errorMsg+'</span>');
	                      $(this).parent().addClass("has-error");
	                     checkBool = true;
	                }else{
	                	 
	                	if($("#pwd").val() !="" && $("#pwd").val() != $("#repwd").val()){
               		  var errorMsg = '两次密码输入不一致.';
	                      $parent.append('<span class="formtips onError hight">'+errorMsg+'</span>');
	                      $(this).parent().addClass("has-error");
	                     checkBool = true;
               	 }else{
	                	$(this).parent().removeClass("has-error");
	                	 checkBool = false;
               	 }
	                }
	             }
	        }).keyup(function(){
	           $(this).triggerHandler("blur");
	        }).focus(function(){
	            $(this).triggerHandler("blur");
	        });//end blur
	        
	    
	    
	        //提交，最终验证。
	         $('#send').click(function(){
	                $("form :input.required").trigger('blur');
	                save();
	         });
	         $('#userSave').click(function(){
	             //验证邮件
	                if( $("#email").val() =="" || ( $("#email").val() !="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test($("#email").val()) ) ){
						alert("请输入正确的email地址");	                      
	                }
	           //验证用户名
	              if( $("#nickname").val() =="" || $("#nickname").val().length < 2 || $("#nickname").val().length > 25 ){
	            	  alert("昵称需要2-25汉字之间");
	              }
	            //校验成功保存
	        		 jQuery.ajax({
							type:"POST",
						 	url:"${ctx}/user/updUser", 
						 	data:"bc_user_id="+$("#bc_user_id").val()+"&nickname="+$("#nickname").val()+"&email="+$("#email").val()+"&sex="+$("#sex").val()  ,
							dataType:"json",
							success:function(data){
									alert(data.msg);
									window.location.href="${ctx}/user/updUserForSapce";
								}
						 	});
	        });
	         $("#classFylab").click(function(){
	        	 //异步加载博客分类和博客
	        	 jQuery.ajax({
	        		type:"POST",
	        	 	url:"${ctx}/classify/selClassifyAjax", 
	        	 	data:'',
	        		dataType:"json",
	        		success:function(data){
	        			 if(typeof(data) != undefined){
	        				$("#classifyTab").empty();
	        				 	$.each(data,function(i){
	        				 		var liststr= "<tr id="+data[i].bc_classify_id+"><td>"+data[i].classify_note+"</td><td><a href='#' onClick=updClassFy("+data[i].bc_classify_id+",'"+data[i].classify_note+"')>修改</a></td><td><a href='#' onClick='delClassFy("+data[i].bc_classify_id+")'>删除</a></td></tr>";
	        				 		$("#classifyTab").append(liststr);
	        					 });
	        				 }
	        			}
	        	 	});
	         });
	         function save(){
	             	$("#oldPwd").val(faultylabs.MD5($("#oldPwd").val()));
	             	$("#pwd").val(faultylabs.MD5($("#pwd").val()));
           			$("#repwd").val(faultylabs.MD5($("#repwd").val()));
		        	//校验成功保存
	            	 jQuery.ajax({
							type:"POST",
						 	url:"${ctx}/user/updPassword", 
						 	data:"oldpwd="+$("#oldPwd").val()+"&newpwd="+$("#pwd").val()+"&repwd="+$("#repwd").val()  ,
							dataType:"json",
							success:function(data){
									alert(data.msg);
					             	$("#oldPwd").val("");
					             	$("#pwd").val("");
				            		$("#repwd").val("");

								}
						 	});
		         }

		        //提交，最终验证。
	         $('#saveClassfy').click(function(){
	               var classFyId = $("#classFyId").val();
	               var classFyName = $("#classfyName").val();
	               if(classFyName == ""){
	            	   alert("名称不能为空");
	            	   return false;
	               }
	  	     	 jQuery.ajax({
	  	 			type:"POST",
	  	 		 	url:"${ctx}/classify/saveClassFyAjax", 
	  	 		 	data:"classify_note="+classFyName+"&bc_classify_id="+classFyId,
	  	 			dataType:"json",
	  	 			success:function(data){
	  	 				 if(typeof(data) != undefined){
	  						 	var liststr= "<tr id="+data.bcClassifys.bc_classify_id+"><td>"+data.bcClassifys.classify_note+"</td><td><a href='#' onClick=updClassFy("+data.bcClassifys.bc_classify_id+",'"+data.bcClassifys.classify_note+"')>修改</a></td><td><a href='#' onclick='delClassFy("+data.bcClassifys.bc_classify_id+")'>删除</a></td></tr>";
	  							$("#classifyTab").append(liststr);
	  						 }
	  	 				 $("#classFyId").val("");
	  	 				$("#classfyName").val("");
	  	 				}
	  	 		 	}); 
	         });
		     
		     //文件上传以及截图
	         var jcrop_api;
	 	    $('#target').Jcrop({
	 	      setSelect: [ 10, 10, 200, 200 ],
	           aspectRatio: 1,
	 	      onChange:   showCoords,
	 	      onSelect:   showCoords,
	 	      onRelease:  clearCoords,
	 	    },function(){
	 	      jcrop_api = this;
	 	    });
	 	
	 	    $('#coords').on('change','input',function(e){
	 	      var x1 = $('#x1').val(),
	 	          x2 = $('#x2').val(),
	 	          y1 = $('#y1').val(),
	 	          y2 = $('#y2').val();
	 	      jcrop_api.setSelect([x1,y1,x2,y2]);
	 	    });
	 	    
	 	    $('#fileupload').fileupload({
	 	        dataType: 'json',
	 	       add: function (e, data) {
	 	            data.context = $('<button type="button" id="beginUpload" class="btn btn-primary start">\
					                            <i class="glyphicon glyphicon-upload"></i>\
					                            <span>开始上传</span>\
					                        	</button>')
 	                .appendTo($('.col-lg-7'))
 	                .click(function () {
 	                    data.context =$('<button type="button" id="uploading" class="btn btn-primary start">\
						                            <i class="glyphicon glyphicon-upload"></i>\
						                            <span>上传中...</span>\
						                        	</button>').replaceAll($(this));
 	                    data.submit();
 	                });
	 	        },
	 	        done: function (e, data) {
	 	        	
	 	        	alert("上传成功！");
	 	        	$('#uploading').remove();
	 	        	$('.file-uploadspan').remove();
					$('<button type="button" id="cutImge" class="btn btn-primary start">\
                            <i class="glyphicon glyphicon-upload"></i>\
                            <span>保存选中区域</span>\
                        	</button>')
 					.appendTo($('.col-lg-7')).click(function(){
 						var imgSrc = $('#target').attr('src');
 			 	    	$('#iconName').val(imgSrc.substr(imgSrc.lastIndexOf('/')+1));
 			 	    	var x1 = $('#x1').val();
 			 	    	var y1 = $('#y1').val();
 			 	    	var w = $('#w').val();
 			 	    	var h = $('#h').val();
 			 	    	var iconName = $('#iconName').val();
 			 	    	$.ajax({
 			                 type: "post",
 			                 url: "${ctx}/user/cutImage",
 			                 data: "x1="+x1+"&y1="+y1 + "&w="+ w+"&h="+h+"&iconName="+iconName,
 			                 dataType:"json",
 			                 success: function(data){
 			                	 if(data.msg=="success"){
 			                		 alert("保存成功！");
 			                		window.location.href="${ctx}/user/updUserForSapce";
 			                	 }else{
 			                		alert("保存失败！");
 			                	 }
 			                 } 
 			                }); 
 					});
 	 	               	 $('#target').attr('src',data.result.pngUrl);
 						 jcrop_api.setImage(data.result.pngUrl);
					//控制裁剪区显示
	 	        	$('.cutarea').show();
	 	        }
	 	    });
	 	    
	 	    $('#filebrowser').on('change',function(){
	 	    	var fileName = $('#filebrowser').val();
	 	    	var formatName = fileName.substr(fileName.lastIndexOf('.')+1);
	 	    	if(formatName == "jpg" || formatName == "png"){
	 				$('#upload').attr('disabled',false);
	 				$('#cutImge').attr('disabled',false);
	 	    	} else {
	 				alert("仅支持png和jpg两种格式");
	 				$('#upload').attr('disabled',true);
	 				$('#cutImge').attr('disabled',true);
	 	    		return false;
	 	    	}
	 	    });
	 		 
	});
 	 function updClassFy(id,note){
 		 $("#classFyId").val(id);
 		 $("#classfyName").val(note);
 		 $("#"+id).remove();  
 	 }
 	 function delClassFy(clssfyId){
 		
	     	 jQuery.ajax({
	  	 			type:"POST",
	  	 		 	url:"${ctx}/classify/delClassifyAjax", 
	  	 		 	data:"bc_classify_id="+clssfyId,
	  	 			dataType:"json",
	  	 			success:function(data){
	  	 				 alert(data.info);
	  	 				 if(data.msg == "success"){
	  	 					 $("#"+clssfyId).remove();    
	  	 				 }
	  	 				}
	  	 		 	}); 
     }
 	 
	  // Simple event handler, called from onChange and onSelect
	  // event handlers, as per the Jcrop invocation above
	  function showCoords(c)
	  {
	    $('#x1').val(c.x);
	    $('#y1').val(c.y);
	    $('#x2').val(c.x2);
	    $('#y2').val(c.y2);
	    $('#w').val(c.w);
	    $('#h').val(c.h);
	  };
	
	  function clearCoords()
	  {
	    $('#coords input').val('');
	  };
 	</script>
</body>
</html>
